<template>
    <view class="y">
        <view style="width: 95%;margin: auto;" @click="suo()">
            <uni-easyinput placeholder="点击前往搜索"></uni-easyinput>
        </view>
        <view class="x">
            <view class="y zuo">
                <view class="center">
                    <view class="center-list">
                        <view class="pics">
                            <scroll-view class="gundong" scroll-y v-for="(item,index) in navLeft" :key="index">
                                <view :class="{'active':isActive === index}" @click="checked(item.id,index)">
                                    {{item.name}}
                                </view>
                            </scroll-view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="y you">
                <view style="margin: auto;margin-top: 20rpx;">
                    <img :src="yous.picUrl" style="width: 550rpx;height: 200rpx;" />
                </view>
                <view style="text-align: center;width: 60%;">{{yous.desc}}</view>

                <view class="x" style="flex-wrap: wrap;">
                    <view v-for="(item,index) in youx" :key="index" style="width: 200rpx;padding-top: 20rpx;">
                        <view style="display: flex;justify-content: center;">
                            <img :src="item.picUrl" style="width: 100rpx;height: 100rpx;" />
                        </view>
                        <view style="display: flex;justify-content: center;">
                            {{item.name}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isActive: 0,
                navLeft: [], //左侧导航栏数据
                yous: [], //存储右侧顶部轮播图和文字
                youx: [] //存储右侧商品数据
            }
        },
        onLoad() {

            uni.request({
                url: 'http://47.91.230.137:8086/wx/catalog/index',
                success: (res) => {
                    this.navLeft = res.data.data.categoryList
                    this.yous = res.data.data.currentCategory
                    this.youx = res.data.data.currentSubCategory
                }
            })
        },
        methods: {
            checked(id, index) {
                this.isActive = index
                uni.request({
                    url: "http://47.91.230.137:8086/wx/catalog/current?id=" + id,
                    success: (res) => {
                        this.yous = res.data.data.currentCategory
                        this.youx = res.data.data.currentSubCategory
                    }
                })
            },
            suo() {
                uni.navigateTo({
                    url: '/pages/index/sosuo'
                })
            }
        }
    }
</script>

<style>
    .x {
        display: flex;
        flex-direction: row;
    }

    .y {
        display: flex;
        flex-direction: column;
    }

    .center {
        width: 18%;
        position: relative;
    }

    .center-list {
        width: 20%;
        height: 85%;
        position: fixed;
        overflow: auto;
    }

    .pics {
        width: 100%;
        height: auto;
    }

    .gundong view {
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 28rpx;
        border-bottom: solid #e6e6e6 2rpx;
    }

    .active {
        color: #ff8c65;
        font-weight: 900;
        border-left: 8rpx solid #ff5934;
    }

    .zuo {
        width: 20%;
    }

    .you {
        width: 80%;
    }
</style>